<template>
    <div>
        <div class="combat_gains_found">
            <div class="top box-r4"><img src="../../assets/img/9c6238cafea05e71b0d8d2119212dd70.png"></div>
            <p class="combat_gains_found_title">我的战绩表</p>
            <ul class="u1">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        loading-text="加载中"
                        :immediate-check="false"
                        @load="onLoad"
                >
                    <li class="box-r4"  v-for="(item, index) in mylist">
                        <div class="left"><span class="s1">{{item.createtime}}</span><span class="s2">{{item.title}}</span></div>
                        <div class="right">
                            <!--<img src="../../assets/img/icon_del.png" @click="del(item.id)"/>-->
                            <!--<img src="../../assets/img/icon_edit.png" @click="edits(item.id)"/>-->
                            <router-link :to="'/myzoe/zhanjibiaoxq/'+item.id"></router-link>
                        </div>
                    </li>
                </van-list>
            </ul>
            <router-link class="combat_gains_found_btn" to="/myzoe/creatzhanji"><p>创建战绩表</p></router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return{
                loading: false,
                finished: false,
                page:1,
                mylist:[]
            }
        },
        mounted(){
            this.getList()
        },
        methods:{
            //触底加载更多
            onLoad() {
                // 异步更新数据
                this.page++;
                this.getList();
            },
            getList(){
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/user.zhanji/lists",
                    params: {page:that.page},
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            var ress=res.data.data.data;
                            if (ress.length < 1 || ress == null ) {
                                // 加载结束
                                that.finished = true;
                                return;
                            }else {
                                that.mylist.push.apply(that.mylist,ress)
                            }
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .box-r4, .red_btn {
        border-radius: 4px;
    }
    .box-r4 {
        display: block;
        background: #fff;
        margin: 7px 10px 0;
        padding: 0 15px;
        overflow: hidden;
    }
    .combat_gains_found .top {
        height: 110px;
    }
    .combat_gains_found .top img {
        display: block;
        height: 110px;
        margin: 0 auto;
    }
    .combat_gains_found .combat_gains_found_title {
        height: 16px;
        line-height: 16px;
        color: #999;
        padding-left: 15px;
        margin-top: 20px;
    }
    .combat_gains_found ul.u1 {
        display: block;
        margin-bottom: 100px;
    }
    .combat_gains_found ul.u1 li {
        display: -webkit-box;
        padding: 5px 15px;
    }
    .combat_gains_found ul.u1 li .left {
        -webkit-box-flex: 1;
    }
    .combat_gains_found ul.u1 li .left .s1 {
        font-size: 12px;
        display: block;
        color: #999;
        line-height: 20px;
        margin: 5px 5px 0 0;
    }
    .combat_gains_found ul.u1 li .left .s2 {
        font-size: 14px;
        display: block;
        line-height: 20px;
        margin-bottom: 10px;
    }
    .combat_gains_found ul.u1 li .right {
        width: 32px;
        margin-left: 10px;
        display: flex;
        flex-flow: row;
        justify-content: flex-end;
        align-items: center;
    }
    .combat_gains_found ul.u1 li .right img{
        width: 24px;
        height: 24px;
        margin-left: 20px;
    }
    .combat_gains_found ul.u1 li .right a {
        display: block;
        width: 32px;
        height: 32px;
        background: url() #ecf3ff 8px 8px no-repeat;
        background-size: 15px;
        border-radius: 100px;
        margin: 10px auto;
    }
    .combat_gains_found .combat_gains_found_btn {
        display: block;
        background: #fc5d4d;
        color: #fff;
        font-size: 13px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-weight: 700;
        border-radius: 4px;
        width: 90%;
        box-shadow: 0 5px 10px #f6a59f;
        position: fixed;
        bottom: 20px;
        left: 5%;
    }
</style>